<template>
    <div class="main-container">
        <div class="query_area">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-condition"></i></span>
                </div>
                <div style="height: 40px;">
                    <el-form :inline="true" :model="formQuery">
                        <el-form-item label="实例名称">
                            <el-input size="small" v-model="formQuery.instanceName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="流程类型">
                            <el-select size="small" v-model="formQuery.category" placeholder="请选择">
                                <el-option v-for="item in categories" :key="item.value" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit(null,null)" size="small">查询
                            </el-button>
                            <el-button type="info" icon="el-icon-refresh-left" @click="onReset" size="small">
                                重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card class="table-list">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-table-list" style="font-weight: 600;margin-top: 8px;"></i></span>
                    <el-button class="el-icon-plus" style="float: right; padding: 3px 0;font-size: 20px" type="text"
                               @click="handleClick(null)"></el-button>
                </div>
                <div>
                    <el-table :data="tableData" height="calc(100vh - 400px)" border style="width: 100%"
                              empty-text="暂无数据" :loading="loading">
                        <el-table-column align="center" type="index" width="50" label="序号"
                                         fixed="left"></el-table-column>
                        <el-table-column align="center" prop="name" label="流程实例名称" min-width="160"></el-table-column>
                        <el-table-column align="center" prop="currNodeName" label="当前节点" min-width="100"></el-table-column>
                        <el-table-column align="center" prop="startUserName" label="发起人" min-width="100"></el-table-column>
                        <el-table-column align="center" prop="startDate" label="发起时间" width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-time">{{scope.row.startDate}}</i>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="recentlyDoTime" label="最近办理" width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-time">{{scope.row.recentlyDoTime}}</i>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="claimUserName" label="锁定人"min-width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.claimUserName">{{scope.row.claimUserName}}</span>
                                <span v-else>无</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="claimTime" label="锁定时间" width="180">
                            <template slot-scope="scope">
                                <i v-if="scope.row.claimTime" class="el-icon-time">{{scope.row.claimTime}}</i>
                                <span v-else>未锁定</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="suspended" label="状态" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.suspended" style="color: #ff932a">挂起</span>
                                <span v-else style="color: #42b983">正常</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" v-if="scope.row.claimTime" icon="el-icon-key"
                                           style="font-size: 18px" title="解除锁定"
                                           @click="handleDoTask(scope.row,'unClaim')">
                                </el-button>
                                <el-button type="text" v-if="!scope.row.claimTime" icon="el-icon-lock"
                                           style="font-size: 18px" title="锁定"
                                           @click="handleDoTask(scope.row,'claim')">
                                </el-button>
                                <el-button type="text" icon="el-icon-reading" style="font-size: 18px" title="办理"
                                           @click="handleDoTask(scope.row,'do')">
                                </el-button>
                                <el-button type="text" icon="el-icon-user" style="font-size: 18px" title="转办"
                                           @click="handleDoTask(scope.row,'turn')">
                                </el-button>
                                <el-button type="text" icon="el-icon-video-pause" style="font-size: 18px" title="挂起"
                                           v-if="!scope.row.suspended" @click="handleDoTask(scope.row,'suspended')">
                                </el-button>
                                <el-button type="text" icon="el-icon-video-play" style="font-size: 18px" title="激活"
                                           v-if="scope.row.suspended" @click="handleDoTask(scope.row,'active')">
                                </el-button>
                                <el-button type="text" icon="el-icon-view" style="font-size: 18px" title="查看流程图"
                                           @click="handleViewFlowImg(scope.row)">
                                </el-button>
                                <el-popconfirm title="确定删除吗?" style="margin-left: 10px;"
                                               @onConfirm="handleDelete(scope.row)">
                                    <el-button type="text" icon="el-icon-delete" style="font-size: 18px"
                                               slot="reference">
                                    </el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="text-align: right;margin-top: 8px">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="pageNum"
                                   :page-sizes="[10, 20, 50, 100]"
                                   :page-size="pageSize"
                                   layout="prev, pager, next, sizes,total"
                                   :total="total">
                    </el-pagination>
                </div>
            </el-card>
        </div>
        <el-dialog title="发起流程实例" :visible.sync="dialogVisible" width="30%">
            <el-radio-group v-model="choseModel" size="small">
                <el-radio v-for="(item,index) in flowModels" :key="index"
                          :label="item" border>{{item.name}}
                </el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleStartConfirm(false)" size="small"
                           :loading="startLoading">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="流程实例流程图" :visible.sync="imgDialogVisible" width="50%">
            <el-image :src="flowImgUrl" fit="contain" :lazy="true"></el-image>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "Workflow",
        data() {
            return {
                tableData: [],
                flowModels: [],
                choseModel: null,
                pageNum: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                startLoading: false,
                formQuery: {
                    instanceName: null,
                    category: null
                },
                dialogVisible: false,
                imgDialogVisible: false,
                flowImgUrl: null,
                categories: [
                    {
                        value: "apply holiday",
                        label: "请假"
                    },
                    {
                        value: "bx",
                        label: "报销"
                    }
                ]
            }
        },
        methods: {
            formatterDate(row, column, cellValue, index) {
                if (cellValue) {
                    return this.$formatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss');
                } else {
                    return ""
                }
            },
            handleDeployed(row) {
                this.$httpPost(this.$axiosFlowHttp, "api/rest/instance/deploy/" + row.id, {}).then(res => {
                    if (res.code === 200) {
                        this.$successMsg("部署成功");
                    } else {
                        this.$errorMsg("部署失败");
                    }
                    this.onSubmit(null, null);
                });
            },
            handleClick(row) {
                this.dialogVisible = true;
                this.choseModel = null;
                this.$httpGet(this.$axiosFlowHttp, "api/rest/model/list/page", {status: "1"}).then(res => {
                    if (res.code === 200) {
                        this.flowModels = res.data;
                    }
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.onSubmit(null, val);
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.onSubmit(val, this.pageSize);
            },
            //查询方法
            onSubmit(pageNum, pageSize) {
                this.formQuery.pageNum = pageNum ? pageNum : 1;
                this.formQuery.pageSize = pageSize ? pageSize : this.pageSize;
                this.initTableData(this.formQuery);
            },
            onReset() {
                this.formQuery = {
                    instanceName: null,
                    category: null
                };
            },
            handleDelete(row) {
                this.$httpDelete(this.$axiosFlowHttp, `api/rest/instance/del/${row.instanceId}`, {}).then(res => {
                    if (res.code === 200) {
                        this.$successMsg("删除成功");
                    } else {
                        this.$errorMsg("删除失败");
                    }
                    this.onSubmit(null, null);
                });
            },
            //办理任务
            handleDoTask(row, type) {
                const user = JSON.parse(sessionStorage.getItem("currLoginUser"));
                let url = "", param = {}, tip = "";
                switch (type) {
                    case "claim":
                        url = "api/rest/task/claim/" + row.currNodeId + "/" + user.id;
                        tip = "锁定";
                        break;
                    case "unClaim":
                        url = "api/rest/task/unClaim/" + row.currNodeId + "/" + user.id;
                        tip = "解除锁定";
                        break;
                    case "do":
                        url = "api/rest/task/do/" + row.currNodeId + "/" + user.id;
                        param = {};
                        tip = "办理";
                        break;
                    case "turn":
                        url = "api/rest/task/turn/" + row.currNodeId + "/" + user.id;
                        tip = "转办";
                        break;
                    case "active":
                        url = "api/rest/task/" + type + "/" + row.instanceId;
                        tip = "激活";
                        break;
                    case "suspended":
                        url = "api/rest/task/" + type + "/" + row.instanceId;
                        tip = "挂起";
                        break;
                }
                this.$httpPost(this.$axiosFlowHttp, url, param).then(res => {
                    if (res.code === 200) {
                        this.$successMsg(tip + "成功");
                    } else {
                        this.$errorMsg(tip + "失败");
                    }
                    this.onSubmit(null, null);
                });
            },
            //查看流程图
            handleViewFlowImg(param) {
                this.imgDialogVisible = !!param;
                this.flowImgUrl = this.$flowUrlHttp + "api/rest/instance/img/" + param.instanceId;
            },
            handleStartConfirm(param) {
                const choseModel = this.choseModel;
                const user = JSON.parse(sessionStorage.getItem("currLoginUser"));
                if (choseModel) {
                    this.startLoading = true;
                    this.dialogVisible = param;
                    const param = {
                        instanceName: choseModel.name,
                        processDefKey: choseModel.key,
                        processDefId: "",
                        businessId: "",
                        extInstanceId: "",
                        extInstanceName: choseModel.name,
                        currUserId: user.id,
                        currUserName: user.name
                    };
                    this.$httpPost(this.$axiosFlowHttp, "api/rest/instance/start", param).then(res => {
                        if (res.code === 200) {
                            this.$successMsg("发起流程成功");
                        } else {
                            this.$errorMsg("发起流程失败");
                        }
                        this.startLoading = false;
                        this.onSubmit(null, null);
                    });
                } else {
                    this.$warningMsg("请先选择一个流程模型");
                }
            },
            //子组件方法回调
            callBackFromSub(param) {
                this.dialogVisible = param;
                this.onSubmit(null, null);
            },
            //初始化表格数据
            initTableData(param) {
                this.loading = true;
                this.$httpGet(this.$axiosFlowHttp, "api/rest/instance/list/page", param).then(res => {
                    if (res.code === 200) {
                        this.total = res.total;
                        this.pageSize = res.pageSize;
                        this.tableData = res.data;
                    }
                    this.loading = false;
                });
            }
        },
        mounted() {
            this.onSubmit(null, null);
        }
    }
</script>

<style scoped lang="scss">
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix > span {
        display: inline-block;
        height: 30px;
        line-height: 15px;
    }

    .el-icon-condition, .el-icon-table-list {
        font-size: 20px;
        margin: 3px 3px 3px 3px;
    }

    .table-list {
        margin-top: 10px;
        /*height: calc(100vh);*/
    }

    .el-card {
        /deep/ .el-card__header {
            padding: 10px 15px;
        }
    }

    .avatar {
        width: 35px;
        height: 35px;
        border-radius: 35px;
    }

    .el-table .cell {
        height: 23px;

        .el-button {
            padding: 0 0;
        }
    }
</style>
